<template>
  <div>
    <page-header title="角色管理">
      <n-button type="primary" @click.stop="handleClickAdd">新增</n-button>
    </page-header>
    <div class="mt-[16px]">
      <n-grid x-gap="12" :cols="4">
        <n-gi>
          <n-input
            clearable
            v-model:value="paginationResult.roleName"
            placeholder="请输入角色名称"
            @update:value="handleSearch"
          />
        </n-gi>
        <n-gi>
          <n-input
            clearable
            v-model:value="paginationResult.roleCode"
            placeholder="请输入角色编码"
            @update:value="handleSearch"
          />
        </n-gi>
      </n-grid>
      <div class="mt-[16px]"></div>
      <BasicTable
        :table-props="tableResult"
        :columns="columns"
        :pagination-props="paginationResult"
        maxHeight="66vh"
        minHeight="48vh"
      />
    </div>
    <RoleModal
      v-model:show="showRoleModal"
      :title="roleModalTitle"
      :action-type="actionType"
      :role-detail="roleDetail"
      @close="handleToggleShowRoleModal(false)"
      @cancel="handleToggleShowRoleModal(false)"
      @success="handleSuccess"
    />
  </div>
</template>
<script setup lang="ts">
import { onMounted, h } from "vue";
import { getClientRolesList } from "@/api/role/role.api";
import { useTableHook } from "@/components/normal/basicTable/useTableHook";
import { RoleModal, useRoleModal } from "@/components/biz/roleModal/index.ts";
import { ActionTypeEnum } from "@/enums/actionTypeEnum";
import { NButton, NIcon } from "naive-ui";
import { CreateOutline } from "@vicons/ionicons5";
import { cloneDeep, debounce } from "lodash-es";

const columns = [
  {
    title: "#",
    type: "index",
    key: "key",
    width: "5%",
    render: (_: any, index: number) => {
      return `${index + 1}`;
    },
  },
  {
    title: "角色名称",
    key: "roleName",
  },
  {
    title: "角色编码",
    key: "roleCode",
  },
  {
    title: "创建时间",
    key: "createTime",
  },
  {
    title: "操作",
    key: "actions",
    align: "right",
    render: (row: any) => {
      return [
        h(
          NButton,
          {
            size: "small",
            type: "primary",
            secondary: true,
            onClick: () => {
              handleClickEdit(row);
            },
          },
          {
            icon: () =>
              h(NIcon, null, {
                default: () => h(CreateOutline),
              }),
          }
        ),
      ];
    },
  },
];

const {
  showRoleModal,
  roleModalTitle,
  roleDetail,
  actionType,
  handleToggleShowRoleModal,
} = useRoleModal();

const { tableResult, paginationResult, getDataList } = useTableHook<any>({
  api: getClientRolesList,
  queryForm: {
    roleName: "",
    roleCode: "",
  },
});

const handleClickEdit = (payload: any) => {
  console.log(payload);
  const { roleName } = payload;
  roleDetail.value = cloneDeep(payload);
  roleModalTitle.value = `编辑角色-${roleName}`;
  actionType.value = ActionTypeEnum.EDIT;
  handleToggleShowRoleModal(true);
};

const handleClickAdd = () => {
  roleDetail.value = {};
  roleModalTitle.value = "新增角色";
  actionType.value = ActionTypeEnum.ADD;
  handleToggleShowRoleModal(true);
};

const handleSuccess = () => {
  roleDetail.value = {};
  actionType.value = ActionTypeEnum.ADD;
  handleToggleShowRoleModal(false);
  getDataList();
};

const handleSearch = debounce(function () {
  paginationResult.page = 1;
  getDataList();
}, 200);

onMounted(() => {
  getDataList();
});
</script>
